<template>
	<view class="container">
		<Search :showFilter="false" :place-holder="_placeHolder"></Search>
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" 	@click="tabClick(index)">
				<view class="child_item" :class="{current: tabCurrentIndex === index}">{{item.text}}</view>
			</view>
		</view>
		<view class="main">
			<view class="main-content" v-for="(item,index) in list" :key="index">
				<view class="header-content" >
					<view class="left-header">
						<image style="width: 60rpx;height: 60rpx;border: 1px solid #ccc;border-radius: 50%" src="https://gyq-jdy.fragrantly.cn/uploads/adm_files/hfBxVEmNF4JwiWZPPhIsLj4Sa6PIBK5C2PGOt9GD.webp"></image>
						<text class="title">桃桃的团购水果铺</text>
					</view>
					<view class="right-btn"><text class="cell-icon yticon icon-jia1 add_btn"></text><text class="dingyue">订阅</text></view>
				</view>
				<view class="divider"></view>
				<view class="desc">清凉一夏，给大家的水果福利，清凉一夏，给大家的水果福利，清凉一夏，给大家的收到分光光度法个</view>
				<view class="price">
					<view class="price-detail">¥ 12.6~20.99</view>
					<view class="price-time">1小时前发布</view>
				</view>
				<view class="img-list">
					<view class="img-container">
						<view v-for="(item, index) in images" :key="index" class="img-item">
						        <image :src="item" class="img"></image>
						      </view>
					</view>
				</view>
				
				<view class="danmu">
					<scroll-view class="scroll-view" scroll-y="true" :scroll-into-view="scrollIntoView" scroll-with-animation>
						<view class="danmu-list" v-for="(item, index) in danmu" :key="index" :id="'message-' + index">
							<view style="display: flex;align-items: center;flex:1">
								<view style="font-size: 24rpx;">{{index+200}}</view>
								<view style="margin-left: 10rpx;">
									<image style="width: 30rpx;height: 30rpx;border-radius: 50%" src="https://gyq-jdy.fragrantly.cn/uploads/adm_files/hfBxVEmNF4JwiWZPPhIsLj4Sa6PIBK5C2PGOt9GD.webp"></image>
								</view>
								<view class="danmu-nick">{{item.nickname}}:</view>
								<view style="font-size: 24rpx;margin-left: 10rpx;">15分钟前</view>
								<view class="danmu-content">{{item.content}}</view>
							</view>
							
							<view style="font-size: 24rpx;">+12</view>
						</view>
					</scroll-view>
					<!-- <view class="danmu-list" v-for="(item, index) in danmu" :key="index">
						<view style="display: flex;align-items: center;flex:1">
							<view style="font-size: 24rpx;">{{index+200}}</view>
							<view style="margin-left: 10rpx;">
								<image style="width: 30rpx;height: 30rpx;border-radius: 50%" src="https://gyq-jdy.fragrantly.cn/uploads/adm_files/hfBxVEmNF4JwiWZPPhIsLj4Sa6PIBK5C2PGOt9GD.webp"></image>
							</view>
							<view class="danmu-nick">{{item.nickname}}:</view>
							<view style="font-size: 24rpx;margin-left: 10rpx;">15分钟前</view>
							<view class="danmu-content">{{item.content}}</view>
						</view>
						
						<view style="font-size: 24rpx;">+12</view>
					</view> -->
				</view>
				<view class="bottom-show">
					<view class="bottom-status">正在接龙</view>
					<view class="right-btn"><text class="cell-icon yticon icon-weixin add_btn"></text><text class="dingyue">分享</text></view>
				</view>
				
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import Search from "@/components/search"
	import {mapMutations} from 'vuex';
	import Api from '@/common/api';
	export default{
		components: {
			Search
		},
		data(){
			return {
				scrollIntoView: '', // 用于控制滚动到哪个元素
				intervalId: null, // 存储定时器ID
				page: 1,
				size: 4,
				more_data: true,
				loadingType:'more',
				list:[],
				_placeHolder:'请输入接龙活动、团长名、商品名',
				tabCurrentIndex: 0,
				navList: [{
						state: 0,
						text: '附近',
					},
					{
						state: 1,
						text: '订阅',
					},
					{
						state: 2,
						text: '热度',
					}				
				],
				images:[
					"https://gyq-jdy.fragrantly.cn/uploads/adm_files/hfBxVEmNF4JwiWZPPhIsLj4Sa6PIBK5C2PGOt9GD.webp",
					"https://gyq-jdy.fragrantly.cn/uploads/adm_images/39969b54f47d67bd3ae3e5bd52864356.jpg",
					"https://gyq-jdy.fragrantly.cn/uploads/adm_images/39969b54f47d67bd3ae3e5bd52864356.jpg",
					"https://gyq-jdy.fragrantly.cn/uploads/adm_files/hfBxVEmNF4JwiWZPPhIsLj4Sa6PIBK5C2PGOt9GD.webp",
					"https://gyq-jdy.fragrantly.cn/uploads/adm_images/39969b54f47d67bd3ae3e5bd52864356.jpg"
				],
				danmu:[
					{
						nickname:'玻璃之情',
						content:'各位宝宝点一下下方的礼物'
					},
					{
						nickname:'似水流年',
						content:'各位宝宝点一下下方的礼物'
					},
					{
						nickname:'小韩韩',
						content:'主播加油'
					},
					{
						nickname:'玻璃之情1',
						content:'各位宝宝点一下下方的礼物'
					},
					{
						nickname:'似水流年1',
						content:'各位宝宝点一下下方的礼物'
					},
					{
						nickname:'小韩韩1',
						content:'主播加油'
					}
				]
			}
		},
		onLoad(){
			this.loadList();
			// this.intervalId = setInterval(this.refreshData, 3000);
		},
		beforeDestroy(){
			 // 清除定时器
			 if (this.intervalId) {
			      clearInterval(this.intervalId);
			    }
		},
		onReachBottom(){
			// this.loadList();
		},
		methods: {
			...mapMutations(['login']),
			//顶部tab点击
			tabClick(index){
				this.tabCurrentIndex = index;
			},
		    refreshData() {
			  // 添加新消息，并移除最旧的消息
			  this.danmu.push({
						nickname:'玻璃之情888',
						content:'各位宝宝点一下下方的礼物'
					},);
			  this.danmu.shift();
			  // 更新当前滚动到的元素ID
			  this.scrollIntoView = 'message-' + (this.danmu.length - 1);
			},
			async loadList(){
				if(!this.more_data){
					return;
				}
				let params = {
					page: this.page,
					size: this.size,
				};
				let data = await Api.apiCall('get',Api.apiName.purchase_list,params);
				if(!data){
					return;
				}
				this.list = this.list.concat(data.data.list)
				if (data.data.list.length > 0 && data.data.list.length == this.size) {
					this.page++;
					this.loadingType = 'more';
				} else {
					this.loadingType = 'nomore';
					this.more_data = false;
				
				}
			},
		},

	}
</script>

<style lang='scss'>
	page{
		background: #fff;
	}
	.container{
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.uni-searchbar__box {
		border: 1px solid #ccc;
	}
	.navbar{
		display: flex;
		height: 88rpx;
		padding:4rpx;
		position: relative;
		border-radius: 16rpx;
		margin: 10rpx 20rpx;
		z-index: 10;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: $font-base;
			color: $font-color-light;
			position: relative;
			.child_item{
				&.current{
					color: $font-color-main;
					font-size: $font-base;
					border-bottom: 4rpx solid $font-color-main;
					&:after{
						content: '';
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						width: 88rpx;
						height: 0;
					}
				}
			}
		}
	}
	.main{
		background: $back-hui;
	}
	.main-content{
		background: $back-white;
		/* height: 400rpx; */
		margin: 30rpx;
		border-radius:20rpx;
	}
	.header-content{
		display: flex;
		align-items: center;
	}
	.left-header{
		flex: 1;
		display: flex;
		align-items: center;
		margin: 20rpx;
	}
	.right-btn{
		margin: 20rpx;
		border: 1px solid $font-color-main;
		border-radius: 30rpx;
		padding: 8rpx 24rpx;
		font-size: $font-sm;
		color: $font-color-main;
	}
	.title{
		margin-left: 20rpx;
		font-size: $font-base;
	}
	.add_btn{
		color:$font-color-main;
		font-size: 28rpx !important;
	}
	.dingyue{
		margin-left: 6rpx;
	}
	.divider{
		height: 2rpx;
		background: $divider-color;
		opacity: 0.07;
		margin: 10rpx 20rpx;
	}
	.desc{
		color: $font-color-black;
		font-size: $font-lg;
		font-weight: $font-w-600;
		margin: 20rpx;
		height: 76rpx;
		display: -webkit-box;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		
	}
	.price{
		display: flex;
		margin: 20rpx;
	}
	.price-detail{
		flex: 1;
		color: $font-color-yellow;
		font-size: $font-lg;
		font-weight: $font-w-600;
	}
	.price-time{
		color: $font-color-light;
		font-size: $font-base;
	}

	.img-list::-webkit-scrollbar {
		display: none;
	}
	.img-list {
	  width: 100%;
	  height: 240rpx; /* 设置图片容器的高度 */
	  overflow-x: auto; /* 横向滚动 */
	  white-space: nowrap; /* 确保图片在一行内水平排列 */
	}
	
	.img-container {
	  display: flex;
	  flex-direction: row;
	}
	
	.img-item {
	  margin: 16rpx; /* 图片之间的间距 */
	}
	
	.img {
	  width: 198rpx;
	  height: 198rpx;
	  border-radius: 20rpx;
	}
	
	.danmu{
		height: 152rpx;
		overflow: hidden;
		margin: 24rpx;
		.danmu-list{
			display: flex;
			padding: 4rpx;
			/* animation: moveup 4s  infinite alternate; */
			/* -webkit-transition-timing-function:ease-in-out; */
			/* transition-timing-function:ease-in-out; */
			.danmu-nick{
				color: #4CBAF8;
				font-size: 24rpx;
				margin-left: 10rpx;
				width: 70rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap
			}
			.danmu-content{
				font-size: 24rpx;
				color:red;				
				margin-left: 20rpx;
				width: 270rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
	@keyframes moveup{
	    0% {
		
	        transform: translateY(0);
	    }
	    30% {
	        transform: translateY(-72%);
	    }
	    60% {
	        transform: translateY(-142%);
	    }
	    100% {
	        transform: translateY(-212%);
	    }
	}
	.bottom-show{
		display: flex;
		align-items: center;
	}
	.bottom-status{
		flex: 1;
		margin-left: 20rpx;
		font-size: $font-base;
		color:$font-color-main;
	}
</style>
